
import ReactDOM from 'react-dom/client'
import  React,{Fragment} from 'react'
const root=ReactDOM.createRoot(document.getElementById('root'))
/*
  1、JSX是用来实现创建虚拟DOM的另外一种方式，JSX的语法最终通过babel插件将其翻译成React.createElement的
  2、JSX的规则
  1）JSX必须要有一个根节点
  我们可以使用如下方式让其在生成真实DOM元素的时候，不产生真实DOM元素
  第1种方式:React.Fragment来完成
  const vNode=<React.Fragment><div>Hello React</div><div>Hello Giles</div></React.Fragment>
  还有一种写法:
  import {Fragment} from 'react'
  const vNode=<Fragment><div>Hello React</div><div>Hello Giles</div></Fragment>
  第二方式:使用空标签来代替<></>
  2）jsx的标签必须要闭合
  如果一个元素是属于双标签闭合的时候要注意层次关系
  如果是单标签，建议直接在开始标签中直接闭合，比如<img/>
  3) JSX的元素必须符合驼峰式命名法
  - 如果是HTML元素的标签全部小写
  - HTML标签的属性要符合小驼峰(第一个单词小写，之后每个单词的首字母大写)
  - 短横线命名法必须要写成小驼峰,也可以在属性的外面带上""
  - 为了避免命名冲突将一些特殊的属性规定如下
   class------------className
   for--------------htmlFor
  4) 最后将所有的JSX是使用()括起来，可以避免分号陷阱
*/
// const styleObj={
//   color:'red',
//   width:'100px',
//   height:'100px',
//   backgroundColor:'springgreen'
// }
// const vNode=(<>
//   <div>
//     <label htmlFor='username'>姓名:</label>
//     <input type='text' placeholder='请输入用户名' id='username'/>
//   </div>
// </>)

/*

  3、JSX的语法
  回顾:vue中使用mustache,胡子语法,插值表达式
  JSX中使用{}来完成变量的动态显示
  jsx中的注释表达式
  jsx中可以调用函数表达式
  jsx中调用对象表达式
  注意：在调用对象表达式的时候，不能直接在{}中调用对象本身，这样会报错的
*/
let name="Giles"
let age=39
let doMain="https://woniuimage.oss-cn-hangzhou.aliyuncs.com"
let avatar="/woniuimage/teacher/20220222/abc7a6e787be41d0b12aa41e429b71d2.png"
let idcard="610122198404084030"
let student={
  name:'peter',
  age:22,
  hobby:['write program','sing song']
}
const getBirthday=idcard=> idcard.slice(6,10)+"-"+idcard.slice(10,12)+"-"+idcard.slice(12,14)

const vNode=(<>
  <div>姓名:{name}</div>
  <div>虚岁:{age+1}</div>
  <div>
    {/*<img src={`${doMain}${avatar}`}/>*/}
  </div>
  <div>{age>=18?'成年':'未成年'}</div>
  <div>生日:{getBirthday(idcard)}</div>
  <div>{JSON.stringify(student)}</div>
</>)
root.render(vNode)